<template>
  <div class="Home">
    <header>
      <h1>
        宏烨找房后台管理系统
      </h1>
    </header>
    <main>
      <el-aside :width="isCollapse ? '100px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">
          管理员
        </div>
        <div
          :collapse="isCollapse"
          :collapse-transition="false"
          class="left-top"
        >
          <router-link to="/Housing">
            <i class="el-icon-menu"></i>
            房源管理
          </router-link>
          <router-link to="/Streaming">
            <i class="el-icon-picture-outline"></i>
            直播管理
          </router-link>
          <router-link to="/Group">
            <i class="el-icon-picture-outline"></i>
            团购管理
          </router-link>
          <router-link to="/Audit">
            <i class="el-icon-picture-outline"></i>
            审核管理
          </router-link>
          <router-link to="/Order">
            <i class="el-icon-picture-outline"></i>
            订单管理
          </router-link>
          <router-link to="/Consultive">
            <i class="el-icon-picture-outline"></i>
            咨询管理
          </router-link>
          <router-link to="/Broker">
            <i class="el-icon-picture-outline"></i>
            经纪人管理
          </router-link>
        </div>
      </el-aside>
      <div class="main_rigth">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>

<style scoped lang="scss">
.Home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: #fff;
  background: cornflowerblue;
}
.el-aside {
  background: #1d2732;
}
.toggle-button {
  height: 80px;
  // background-color: #4a5064;
  font-size: 16px;
  line-height: 60px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.2em;
}
.left-top {
  height: 70%;
  display: flex;
  flex-direction: column;

  font-size: 15px;
  a {
    width: 200px;
    padding: 10px;
    color: #ccc;
  }
  .router-link-exact-active {
    color: #fff;
    font-weight: bolder;
  }
  i{
    padding: 0 5px;
  }
}

main {
  flex: 1;
  display: flex;
  overflow: scroll;
}
.main_rigth{
  flex: 1;
  background: #efefef;
  overflow-y: scroll;
  padding: 0 10px;
}
</style>
